<template>
	<el-upload
		:action="action"
		:show-file-list="false"
		:on-success="handleUploadSuccess"
		:before-upload="beforeUpload"
	>
		<img v-if="url" :src="url" />
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
</template>

<script>
export default {
	props: {
		action: {
			// 上传图片api的地址
			type: String,
			default: '',
		},
		imgUrl: {
			// 图片地址
			type: String,
			default: '',
		},
	},
	data() {
		return {
			url: this.imgUrl,
		};
	},
	methods: {
		handleUploadSuccess(res, file) {
			if (res.code == 1) {
				this.$message.warning(res.mes);
			} else {
				// 生成一个 base64 的地址 相当于预览图片的地址
				this.url = URL.createObjectURL(file.raw);
				// 将服务器地址传给父级
				this.$emit('res-url', { resImgUrl: res.data.url });
			}
		},
		// 图片上传前 做校验
		beforeUpload(file) {
			const isJPG =
				file.type === 'image/jpeg' ||
				file.type === 'image/gif' ||
				file.type === 'image/png';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG、gif或png 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
	},
};
</script>

<style>
</style>